<template>
  <view class="page">
    <view class="page-head">
      <u-navbar
        title="我的"
        :fixed="true"
        :placeholder="true"
        :bgColor="headBackground"
        :autoBack="false"
        :titleStyle="{ color: '#000' }"
        leftIconColor="transparent"></u-navbar>
    </view>

    <view class="page-top-bg">
      <image class="head-bg" src="/static/my/bg.png" mode="aspectFill"></image>
    </view>

    <view class="page-ctx">
      <view class="ctx-inner">
        <view class="user-info">
          <!-- 未登录 -->
          <view v-if="!vuex_is_login" class="user-box" @click="toUser()">
            <view class="avatar-box">
              <image :src="vuex_avatar_default" class="avatar" mode=""></image>
            </view>
            <view class="info-no-login">登录/注册</view>
          </view>

          <!-- 已登录 -->
          <view v-if="vuex_is_login" class="user-box" @click="toUser()">
            <view class="avatar-box">
              <image
                class="avatar"
                :src="mix_user_avatar"
                mode="aspectFill"></image>
            </view>

            <view class="info-box">
              <view class="title-box">
                <view class="name">
                  {{ mix_user_nick || "设置昵称" }}
                </view>
              </view>
              <view class="mobile">
                {{ mix_user_phone }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="box flex" @click="toUser">
      <image src="/static/my/m-icon.png" mode="aspectFit"></image>
      <view class="flex1">个人信息</view>
      <image src="/static/my/arrow.png" mode="aspectFit"></image>
    </view>

    <!-- <page-footer current="我的"></page-footer> -->
    <avatar_nick_pop ref="avatar_nick_pop" @confirm="confirmAvatarNick" />
    <kefu_pop ref="kefu_pop" />
  </view>
</template>

<script>
import avatar_nick_pop from "@/components/login/avatar_nick_pop.vue";
import kefu_pop from "@/components/my/kefu_pop.vue";

export default {
  components: {
    avatar_nick_pop,
    kefu_pop,
  },
  data() {
    return {
      defaultHeadBackground: "transparent",
      headBackground: "rgba(255,255,255,0)", //控制顶部标题栏颜色 默认透明颜色 transparent

      show_top_bg: false,
      info: {},
      id: "",
      numberInfo: {}, //订单数量汇总
    };
  },

  computed: {},

  onLoad(options) {
    this.id = options.id;
    // this.setView();
  },
  onShow() {
    this.query_user();
  },
  // onPageScroll(e) {
  // 	console.log('滚动页面', e)
  // 	var scrollTop = e.scrollTop;
  // 	if (scrollTop >= 2) {
  // 		this.show_top_bg = true;
  // 	} else {
  // 		this.show_top_bg = false;
  // 	}
  // },

  onPageScroll(e) {
    console.log(e);
    let percent = e.scrollTop / 40;
    percent = percent < 1 ? percent : 1;

    this.headBackground = `rgba(255,255,255,${percent})`;

    if (e.scrollTop != 0) {
    } else {
      // this.headBackground = ''
    }
  },

  methods: {
    query_user() {
      this.$api({
        url: "/getUserInfo",
        method: "get",
        data: {
          //action: "users_userInfo",
        },
      }).then((res) => {
        this.$logjson("个人中心用户信息", res, this.$store.state);
        if (res.code == 200) {
          let data = res.data;
          // data.token = data.token;
          // data.userId = data.id;
          //
          this.$store.commit("set_vuex_user", data);

          //商家身份
          let has_mobile = data.mobile; //是否需要注册用户  ifNeedBindPhone = 1 需要注册
          let has_avatar = !!data.image;
          let has_nick = !!data.name;
          if (has_mobile) {
            if (!has_avatar || !has_nick) {
              this.$nextTick(() => {
                this.$refs.avatar_nick_pop.init();
              });
            }
          }
          console.log("2------", this.$store.state);
          // this.numberInfo = {
          //   orderNeedPay: data.orderNeedPay,
          //   orderNeedDelivery: data.orderNeedDelivery,
          //   orderNeedShouhuo: data.orderNeedShouhuo,
          //   orderNeedComment: data.orderNeedComment,
          //   orderRefundNum: data.orderRefundNum,
          //   orderNeedHexiao: data.orderNeedHexiao,
          //   orderNum: data.orderNum,
          // };
        } else {
          this.$store.commit("remove_vuex_user", false);
        }
      });
    },

    // 头像昵称
    confirmAvatarNick(option) {
      this.query_user();
    },

    setView() {},

    toUser() {
      if (!this.mix_checkLogin()) {
        return;
      }

      // this.toRoute('/my-info')
      if (!this.mix_is_set_phone) {
        this.toRoute({
          path: "/login",
        });
        return;
      } else if (!this.mix_is_set_avatar_nick) {
        this.$nextTick(() => {
          this.$refs.avatar_nick_pop.init();
        });
        return;
      } else {
        this.toRoute("/my-info");
      }
    },

    toUserCenterRoute(path) {
      if (!this.mix_checkLogin()) {
        return;
      }

      if (!this.mix_is_set_phone) {
        this.toRoute({
          path: "/login",
        });
        return;
      } else if (!this.mix_is_set_avatar_nick) {
        this.$nextTick(() => {
          this.$refs.avatar_nick_pop.init();
        });
        return;
      } else {
        this.toRoute(path);
      }
    },

    toNav(item) {
      if (item.title == "在线客服") {
        this.open_kefu();
      } else if (item.title == "关于我们") {
        this.toRoute({
          path: item.route,
        });
      } else {
        if (!this.mix_checkLogin()) {
          return;
        }

        if (!this.mix_is_set_phone) {
          this.toRoute({
            path: "/login",
          });
          return;
        } else if (!this.mix_is_set_avatar_nick) {
          this.$nextTick(() => {
            this.$refs.avatar_nick_pop.init();
          });
          return;
        } else {
          this.toRoute({
            path: item.route,
            query: item.query,
          });
        }
      }
      //  else {
      // 	this.toRoute({
      // 		path: item.route,
      // 		query: item.query
      // 	})
      // }
    },

    open_kefu() {
      this.$refs.kefu_pop.init();
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f8f8f8;
}
</style>

<style lang="scss" scoped>
// 设置标题左对齐
.page-head ::v-deep .u-navbar__content__left {
  display: none;
}

.page-head ::v-deep .u-navbar__content__title {
  flex: 1;
  padding-left: 32rpx;
  text-align: left;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 32rpx;
  color: #000000;
}

// 设置标题左对齐

.page-top-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 404rpx;
  // background: linear-gradient(180deg, #004281 0%, rgba(110, 204, 142, 0) 100%);

  .head-bg {
    width: 100%;
    height: 100%;
  }
}

.page-top {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  right: 0;
  height: 172rpx;

  &.bg {
    background: #00afeb;
  }

  .page-header {
    padding: 0 32rpx;
    padding-top: 100rpx;

    .menu-area-box {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      justify-content: center;
    }

    .addr-box {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #ffffff;

      // .page-title {
      // 	font-size: 34rpx;
      // 	font-family: PingFang SC-Bold, PingFang SC;
      // 	font-weight: bold;
      // 	color: #000000
      // }

      .header-img {
        width: 213rpx;
        height: 48rpx;
      }
    }

    .head-search {
      margin-top: 28rpx;

      ::v-deep .uicon-search {
        font-size: 40rpx !important;
      }
    }
  }
}

.page {
  width: 100%;
  height: 100%;
  background: #f5f7f9;
  .page-ctx {
    position: relative;
    padding: 76rpx 32rpx 64upx;
    // padding-top: 160rpx;

    .ctx-inner {
      // background: #F5F5F5;
    }
  }
}
.box {
  width: 690rpx;
  height: 128rpx;
  background: #ffffff;
  box-shadow: 0rpx 14rpx 32rpx 0rpx rgba(0, 0, 0, 0.03);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 32upx 230upx 28upx 32upx;
  font-size: 24rpx;
  color: #000000;
  & > image {
    width: 14upx;
    height: 12upx;
  }
  & > image:nth-of-type(1) {
    width: 64upx;
    height: 64upx;
    margin-right: 26upx;
  }
}
.user-info {
  padding-top: 0;
  width: 100%;
  min-height: 104rpx;
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  .user-box {
    // padding: 40rpx 24rpx;
    display: flex;
    align-items: center;

    .avatar-box {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      overflow: hidden;

      .avatar {
        width: 100rpx;
        height: 100rpx;
      }
    }

    .info-no-login {
      flex: 1;
      overflow: hidden;
      padding-left: 30rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 36rpx;
      color: #000000;
    }

    .info-box {
      flex: 1;
      overflow: hidden;
      padding-left: 30rpx;

      .title-box {
        display: flex;
        align-items: center;

        .name {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
        }

        .level-marker {
          margin-left: 24rpx;
          width: 36rpx;
          height: 31rpx;

          .level-image {
            width: 36rpx;
            height: 31rpx;
          }
        }

        .level-title {
          margin-left: 10rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 20rpx;
          color: #e2caaa;
        }

        .user-role {
          margin-left: 24rpx;
          padding: 0 12rpx;
          min-width: 70rpx;
          height: 32rpx;
          background: #cb0011;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;
        }
      }

      .mobile {
        margin-top: 10rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
      }
    }

    .setting-box {
      width: 42rpx;
      height: 100rpx;

      image {
        width: 42rpx;
        height: 42rpx;
      }
    }

    .jifen-entry {
      width: fit-content;
      width: 196rpx;
      height: 56rpx;
      background: #ffffff;
      border-radius: 32rpx 0rpx 0rpx 32rpx;

      .jifen-img {
        width: 42rpx;
        height: 42rpx;
      }

      text {
        margin-left: 16rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #164782;
      }
    }
  }

  .entry-box {
    padding: 0 0rpx 16rpx 0rpx;

    .entry-list {
      .entry-item {
        padding: 16rpx 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .title {
          height: 40rpx;
          line-height: 40rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 34rpx;
          color: #000000;
        }

        .text {
          margin-top: 8rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
        }

        .qrcode-box {
          image {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }
  }
}

.box-item {
  margin-bottom: 20rpx;
  padding: 30rpx 0 0 0;
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  .box-inner {
    .nav-wrap {
      flex: 1;
    }
  }
}

.box-title {
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #000000;

  .title-text {
  }

  .title-button {
    text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
    }

    image {
      margin-left: 12rpx;
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.vip-wrap {
  position: relative;
  height: 136rpx;

  .bg-box {
    height: 136rpx;

    image {
      width: 100%;
      height: 136rpx;
    }
  }

  .vip-box {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 24rpx;

    .vip-left {
      .icon-box {
        image {
          margin-right: 16rpx;
          width: 26rpx;
          height: 24rpx;
        }

        text {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #fdc894;
        }
      }

      .tip {
        margin-top: 8rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #fdc894;
      }
    }

    .vip-right {
      .btn {
        width: 128rpx;
        height: 48rpx;
        background: #fdc894;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #000000;
      }
    }
  }
}

.nav-box-row {
  display: flex;
  flex-wrap: wrap;
  // background: #fff;
  // border-radius: 8rpx 8rpx 8rpx 8rpx;

  &.nav-box-row-3 {
    .nav-item {
      width: 33.3333%;
    }
  }

  &.nav-box-row-5 {
    .nav-item {
      width: 20%;
    }
  }

  .nav-item {
    width: 25%;

    height: 168rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &.hidden {
      display: none;
    }

    .icon-box {
      position: relative;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 54rpx;
      height: 54rpx;

      .num-info {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -16rpx;
        right: -24rpx;

        min-width: 32rpx;
        height: 22rpx;
        background: #f54242;
        border-radius: 11rpx 11rpx 11rpx 11rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16rpx;
        color: #ffffff;
      }

      .icon {
        width: 54rpx;
        height: 54rpx;
      }
    }

    .nav-title {
      margin-top: 10rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
    }
  }
}

// 竖向导航

.nav-wrap {
  margin-top: 16rpx;
  background: #fff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.nav-box-column {
  padding: 20rpx 0;

  .nav-item {
    display: flex;
    align-items: center;
    padding: 20rpx 16px;

    .icon-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40rpx;
      height: 40rpx;

      .icon {
        width: 40rpx;
      }
    }

    .nav-title {
      flex: 1;
      padding-left: 30rpx;

      .nav-main {
        font-size: 28rpx;
        color: #000000;
      }

      .nav-sub {
        padding-right: 10rpx;
        font-size: 28rpx;
        color: #000000;
      }
    }

    .arrow-box {
      .arrow {
        width: 13rpx;
      }
    }
  }
}
</style>
